import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface SearchResult {
  account_id: number
  personaname: string
  avatarfull?: string
  last_match_time?: string
}

interface PlayerSearchResultsProps {
  results: SearchResult[]
  onPlayerSelect: (player: SearchResult) => void
  onBack: () => void
}

export default function PlayerSearchResults({ results, onPlayerSelect, onBack }: PlayerSearchResultsProps) {
  const formatLastSeen = (timestamp?: string) => {
    if (!timestamp) return '未知'
    const date = new Date(timestamp)
    const now = new Date()
    const diffInDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24))
    
    if (diffInDays === 0) return '今天'
    if (diffInDays === 1) return '昨天'
    if (diffInDays < 7) return `${diffInDays}天前`
    if (diffInDays < 30) return `${Math.floor(diffInDays / 7)}周前`
    if (diffInDays < 365) return `${Math.floor(diffInDays / 30)}个月前`
    return `${Math.floor(diffInDays / 365)}年前`
  }

  return (
    <Card className="modern-card gradient-border">
      <CardHeader className="text-center pb-4">
        <CardTitle className="text-2xl font-bold text-foreground flex items-center justify-center space-x-2">
          <span>👥</span>
          <span>选择玩家</span>
        </CardTitle>
        <CardDescription className="text-muted-foreground text-base">
          找到 {results.length} 个匹配的玩家，请选择要查看的玩家
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex justify-center mb-4">
          <Button
            variant="outline"
            onClick={onBack}
            className="flex items-center space-x-2"
          >
            <span>←</span>
            <span>返回搜索</span>
          </Button>
        </div>
        
        <div className="space-y-3 max-h-96 overflow-y-auto">
          {results.map((player) => (
            <div
              key={player.account_id}
              className="flex items-center justify-between p-4 rounded-lg border border-border/50 bg-muted/30 hover:bg-muted/50 transition-colors cursor-pointer"
              onClick={() => onPlayerSelect(player)}
            >
              <div className="flex items-center space-x-4">
                <Avatar className="h-12 w-12 shine-effect">
                  <AvatarImage src={player.avatarfull} alt={player.personaname} />
                  <AvatarFallback className="bg-primary/10 text-primary font-semibold">
                    {player.personaname?.charAt(0)?.toUpperCase() || '?'}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="font-semibold text-foreground text-lg">
                    {player.personaname || '未知玩家'}
                  </div>
                  <div className="text-sm text-muted-foreground">
                    Account ID: {player.account_id}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    最后游戏: {formatLastSeen(player.last_match_time)}
                  </div>
                </div>
              </div>
              <Button
                variant="default"
                size="sm"
                className="ml-4 shine-effect"
                onClick={(e) => {
                  e.stopPropagation()
                  onPlayerSelect(player)
                }}
              >
                <span className="flex items-center space-x-1">
                  <span>查看</span>
                  <span>→</span>
                </span>
              </Button>
            </div>
          ))}
        </div>
        
        {results.length === 0 && (
          <div className="text-center py-8">
            <div className="text-4xl mb-4">🔍</div>
            <div className="text-lg font-medium text-muted-foreground">
              没有找到匹配的玩家
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}